<template>
    <div class="myMess">
        <div class="myMess__blueBackground"></div>
        <div class="messBox">
            <div class="messBox__idBox">
                <div class="messBox__idBox__mess">
                    <div class="messBox__idBox__mess__icon iconfont">&#xe690;</div>
                    <img src="./img/photo.jpg" alt="jpg" class="messBox__idBox__mess__photo">
                    <div class="messBox__idBox__mess__nameBox">
                        <h2 class="messBox__idBox__mess__nameBox__name">热心市民张先生</h2>
                        <div class="messBox__idBox__mess__nameBox__grade">
                            <span class="messBox__idBox__mess__nameBox__grade__background">
                                <span class="messBox__idBox__mess__nameBox__grade__background__icon iconfont">&#xe64a;</span>
                            </span>
                            <span class="messBox__idBox__mess__nameBox__grade__count">16</span>
                        </div>
                    </div>
                    <p class="messBox__idBox__mess__id">ID: 1069643013</p>
                </div>
                <ul class="messBox__idBox__redPacketList">
                    <li class="messBox__idBox__redPacketList__item">
                        红包
                        <div class="messBox__idBox__redPacketList__item__count">218</div>
                    </li>
                    <li class="messBox__idBox__redPacketList__item">
                        优惠券
                        <div class="messBox__idBox__redPacketList__item__count">12张</div>
                    </li>
                    <li class="messBox__idBox__redPacketList__item">
                        鲜豆
                        <div class="messBox__idBox__redPacketList__item__count">88</div>
                    </li>
                    <li class="messBox__idBox__redPacketList__item">
                        白条
                        <div class="messBox__idBox__redPacketList__item__count">1000</div>
                    </li>
                </ul>
            </div>
            <div class="messBox__optionsBox">
                <div class="messBox__optionsBox__item">
                    <div class="messBox__optionsBox__item__left">
                        <div class="messBox__optionsBox__item__left__icomBox">
                            <span class="messBox__optionsBox__item__left__icomBox__icon iconfont">&#xe657;</span>
                        </div>
                        <span class="messBox__optionsBox__item__left__text">我的钱包</span>
                    </div>
                    <span class="messBox__optionsBox__item__right iconfont">&#xe649;</span>
                </div>
                <router-link to="/mymess/mysite" class="site_link">
                    <div class="messBox__optionsBox__item">
                        <div class="messBox__optionsBox__item__left">
                            <div class="messBox__optionsBox__item__left__icomBox">
                                <span class="messBox__optionsBox__item__left__icomBox__icon iconfont">&#xe614;</span>
                            </div>
                            <span class="messBox__optionsBox__item__left__text">我的地址</span>
                        </div>
                        <span class="messBox__optionsBox__item__right iconfont">&#xe649;</span>
                    </div>
                </router-link>
                <div class="messBox__optionsBox__item">
                    <div class="messBox__optionsBox__item__left">
                        <div class="messBox__optionsBox__item__left__icomBox">
                            <span class="messBox__optionsBox__item__left__icomBox__icon iconfont">&#xe605;</span>
                        </div>
                        <span class="messBox__optionsBox__item__left__text">客服与帮助</span>
                    </div>
                    <span class="messBox__optionsBox__item__right iconfont">&#xe649;</span>
                </div>
            </div>
        </div>
    </div>
    <Footer :componName="name"/>
</template>

<script>
import Footer from '../../components/home-components/Footer.vue'
import '../../style/iconfont.css'
export default {
  name: 'MyMess',
  components: { Footer },
  data () {
    return {
      name: ''
    }
  },
  created () {
    this.name = this.$options.name
  }
}
</script>

<style lang="scss" scoped>
.site_link {
    text-decoration: none;
}
.myMess {
    position: absolute;
    top: 0;
    bottom: .49rem;
    left: 0;
    right: 0;
    background: #f1f1f1;
    z-index: -2;
    &__blueBackground {
        position: absolute;
        left: 0;
        right: 0;
        top:0;
        bottom: 4.17rem;
        background-image: linear-gradient(239deg, #3A6FF3 0%, #50C7FB 100%);
        border-bottom-left-radius: .5rem .15rem;
        border-bottom-right-radius: .5rem .15rem;
        z-index: -1;
    }
}
.messBox {
    padding:0 .18rem;
    &__idBox {
        display: flex;
        flex-direction: column;
        height: 2.03rem;
        margin-top: 1.08rem;
        background: #ffffff;
        border-radius: .08rem;
        box-shadow: 0 .08rem .16rem 0 rgba(0,0,0,0.08);
        &__mess {
            height: 1.26rem;
            border-bottom: .01rem solid #f1f1f1;
            position: relative;
            &__icon {
                font-size: .24rem;
                color: #ffffff;
                position: absolute;
                top: -.60rem;
                right: 0;
            }
            &__photo {
                width: .94rem;
                height: .94rem;
                border-radius: 50%;
                position: absolute;
                left: 50%;
                top: -50%;
                transform: translate(-50%,25%);
            }
            &__nameBox {
                position: absolute;
                display: flex;
                align-items: center;
                top: .59rem;
                width: 100%;
                overflow: hidden;
                position: relative;
                &__name {
                    margin:0 .12rem 0 .85rem;
                    font-size: .24rem;
                    color: #262628;
                    line-height: .36rem;
                    font-weight: normal;
                }
                &__grade {
                    width: .7rem;
                    height: .3rem;
                    background-image: linear-gradient(180deg, #BEE700 0%, #8ACA00 100%);
                    border-radius: .3rem;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    transform: scale(0.5);
                    &__background {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: #5f8a02;
                        border-radius: 50%;
                        width: .22rem;
                        height: .22rem;
                        &__icon {
                            font-size: .14rem;
                            color: #FFC700;
                        }
                    }
                    &__count {
                        display: inline-block;
                        font-size: .2rem;
                        color: #FFFFFF;
                    }
                }
            }
            &__id {
                width: 100%;
                display: flex;
                justify-content: center;
                margin:0;
                font-size: 14px;
                color: #C1C0C9;
                line-height: .17rem;
                position: absolute;
                top:.97rem;
            }
        }
        &__redPacketList {
            list-style: none;
            display: flex;
            flex: 1;
            margin:0;
            padding:0;
            justify-content: space-around;
            &__item {
                font-size: .12rem;
                color: #C1C0C9;
                line-height: .17rem;
                text-align: center;
                padding-top:.12rem;
                &__count {
                    font-size: 20px;
                    color: #262628;
                    text-align: center;
                    line-height: .28rem;
                    padding-top: .03rem;
                }
            }
        }
    }
    &__optionsBox {
        margin-top: .16rem;
        box-shadow: 0 .08rem .16rem 0 rgba(0,0,0,0.08);
        border-radius: .08rem;
        &__item {
            padding:.12rem .16rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &__left {
                &__icomBox {
                margin-right: .12rem;
                display: inline-block;
                width: .22rem;
                height: .22rem;
                border-radius: .08rem;
                line-height: .22rem;
                text-align: center;
                    &__icon {
                        font-size: .13rem;
                        color:#ffffff;
                        line-height: .2rem;
                    }
                }
                &__text {
                    font-size: .14rem;
                    color: #262626;
                }
            }
            &__right {
                font-size: .12rem;
                color: #C2C4CA;
              }
        }
        &__item:first-child {
            padding-top: .16rem;
        }
        &__item:last-child {
            padding-bottom: .16rem;
        }
        .messBox__optionsBox__item:nth-child(1) .messBox__optionsBox__item__left__icomBox {
            background: #ED4A47;
            font-weight: bold;
        }
        .messBox__optionsBox__item:nth-child(2) .messBox__optionsBox__item__left__icomBox {
            background: #32C5FF;
        }
        .messBox__optionsBox__item:nth-child(3) .messBox__optionsBox__item__left__icomBox {
            background: rgba(144,19,254,0.92);
        }
    }
}
</style>
